<ng-container *ngIf="listView=='grid'">
  <div class="box-view">
    <div class="row-ex">
      <div [class.selected]="folder.isRightClicked" (contextmenu)="onContextMenu($event,folder)"
        [autoScrollDisabled]="autoScrollDisabled" [cdkDropListAutoScrollStep]="1" [cdkDropListDisabled]="disabled"
        [cdkDropListAutoScrollStep]="0" cdkDropList id="folder{{i}}" [cdkDropListData]="folder"
        (cdkDropListDropped)="drop($event)" class="col-ex-5 drag-drop group" [appDragDrop]="folder"
        [rootFolder]="rootFolder" *ngFor="let folder of folders;let i=index;trackBy: trackById">
        <div style="visibility: hidden; position: fixed" [style.left.px]="contextMenuPosition.x"
          [style.top.px]="contextMenuPosition.y" #folderMenuTrigger="matMenuTrigger"
          [matMenuTriggerFor]="folderMenuRight">
        </div>
        <div class="position-relative show-on-hover">
          <div [cdkDragDisabled]="disabled" cdkDrag [cdkDragData]="folder">
            <span *ngIf="disabled && !folder.isShared" role="button" class="material-icons f-icon text-main"
              (click)="onFolderClick(folder)">
              folder
            </span>
            <span *ngIf="!disabled && !folder.isShared" (click)="onFolderDetailClick(folder)" role="button"
              class="material-icons f-icon text-main" (dblclick)="onFolderClick(folder)">
              folder
            </span>
            <span role="button" *ngIf="folder.isShared && disabled" class="material-icons f-icon text-main"
              (click)="onFolderClick(folder)">
              <img src="/assets/images/share-icon.svg" class="share-folder-large">
            </span>
            <span role="button" *ngIf="folder.isShared && !disabled" (click)="onFolderDetailClick(folder)"
              class="material-icons f-icon text-main" (dblclick)="onFolderClick(folder)">
              <img src="/assets/images/share-icon.svg" class="share-folder-large">
            </span>
            <div *ngIf="disabled" role="button" title="{{folder.name}}" class="text-dark fw-600"
              (click)="onFolderClick(folder)">
              {{folder.name | limitTo: 30}}
            </div>
            <div *ngIf="!disabled" role="button" (click)="onFolderDetailClick(folder)" title="{{folder.name}}"
              class="text-dark fw-600" (dblclick)="onFolderClick(folder)">
              {{folder.name | limitTo: 30}}
            </div>
          </div>
          <div class="hover-data">
            <div class="c-box">
              <div class="custom-control custom-checkbox mr-sm-2">
                <mat-checkbox #checkboxes color="primary"
                  (change)="addOrRemoveFolderId(folder.physicalFolderId,$event)">
                </mat-checkbox>
              </div>
            </div>
            <div class="m-icon">
              <button mat-icon-button color="primary" matTooltip="更多" [matMenuTriggerFor]="folderMenu"
                aria-label="Menu">
                <mat-icon> more_horiz</mat-icon>
              </button>
              <mat-menu #folderMenu="matMenu">
                <button *hasClaim="'IsSharedFileFolder'" mat-menu-item (click)="onSharedFolder(folder,'folder')">
                  <mat-icon> shared</mat-icon>
                  共享
                </button>
                <button *hasClaim="'IsDownloadFile'" mat-menu-item (click)="downloadFolder(folder)">
                  <mat-icon> download</mat-icon>
                  下载
                </button>
                <button *hasClaim="'IsSendEmail'" mat-menu-item (click)="sendEmail(folder)">
                  <mat-icon> forward_to_inbox</mat-icon>
                  发送邮件
                </button>
                <button *hasClaim="'IsCopyFolder'" mat-menu-item (click)="onCopyFolder(folder)">
                  <mat-icon> content_copy</mat-icon>
                  拷贝
                </button>
                <button *hasClaim="'IsMoveFile'" mat-menu-item (click)="onMovedFolder(folder)">
                  <mat-icon> zoom_out_map</mat-icon>
                  移动
                </button>
                <button *hasClaim="'IsRenameFile'" mat-menu-item (click)="renameFolder(folder)">
                  <mat-icon> edit</mat-icon>
                  重命名
                </button>
                <button *hasClaim="'IsDeleteFileFolder'" mat-menu-item (click)="deleteFolder(folder)">
                  <mat-icon> delete</mat-icon>
                  删除
                </button>
                <button mat-menu-item (click)="toggleFolderStarred(folder)">
                  <ng-container *ngIf="folder.isStarred">
                    <mat-icon class="material-icons"> grade</mat-icon>
                    移除关注
                  </ng-container>
                  <ng-container *ngIf="!folder.isStarred">
                    <mat-icon class="material-icons-outlined"> grade</mat-icon>
                    添加关注
                  </ng-container>
                </button>
              </mat-menu>
            </div>
            <div class="star-icon">
              <i class="fas fa-star" matTooltip="取消关注" role="button" (click)="toggleFolderStarred(folder)"
                *ngIf="folder.isStarred"></i>
              <i class="far fa-star" role="button" matTooltip="添加关注" (click)="toggleFolderStarred(folder)"
                *ngIf="!folder.isStarred"></i>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</ng-container>
<ng-container *ngIf="listView=='list'">
  <ng-container *ngIf="folders && folders.length>0; else emptyTemp">
    <ul class="list-group list-group-flush">
      <li [class.selected]="folder.isRightClicked" (contextmenu)="onContextMenu($event,folder)" cdkDropList
        [cdkDropListDisabled]="disabled" [cdkDropListAutoScrollStep]="1" [autoScrollDisabled]="autoScrollDisabled"
        id="folder{{i}}" [cdkDropListData]="folder" (cdkDropListDropped)="drop($event)" class="list-group-item px-0"
        [appDragDrop]="folder" [rootFolder]="rootFolder"
        *ngFor="let folder of folders; let i=index; trackBy: trackById">
        <div style="visibility: hidden; position: fixed" [style.left.px]="contextMenuPosition.x"
          [style.top.px]="contextMenuPosition.y" #folderMenuTrigger="matMenuTrigger"
          [matMenuTriggerFor]="folderMenuRight">
        </div>
        <div class="row align-items-center m-0">
          <div class="col-md-auto col-auto">
            <mat-checkbox #checkboxes color="primary" (change)="addOrRemoveFolderId(folder.physicalFolderId,$event)">
            </mat-checkbox>
          </div>
          <div class="col-md col" [cdkDragDisabled]="disabled" cdkDrag [cdkDragData]="folder">
            <a role="button" *ngIf="disabled" class="d-flex align-items-center" (click)="onFolderClick(folder)">
              <span *ngIf="!folder.isShared" class="material-icons folder_shared">
                folder
              </span>
              <span class="material-icons" *ngIf="folder.isShared">
                <span class="folder_shared">
                  <img src="/assets/images/folder-users.svg" class="shared-icon">
                </span>
              </span>
              {{folder.name | limitTo: 30}}
            </a>
            <a role="button" *ngIf="!disabled" class="d-flex align-items-center" (click)="onFolderDetailClick(folder)"
              (dblclick)="onFolderClick(folder)">
              <span *ngIf="!folder.isShared" class="material-icons folder_shared">
                folder
              </span>
              <span class="material-icons" *ngIf="folder.isShared">
                <span class="folder_shared">
                  <img src="/assets/images/folder-users.svg" class="shared-icon">
                </span>
              </span>
              {{folder.name | limitTo: 30}}
            </a>
          </div>
          <div class="col-md-3 col-auto d-md-flex d-none">
            <i class="fas fa-star" matTooltip="取消关注" role="button" (click)="toggleFolderStarred(folder)"
              *ngIf="folder.isStarred"></i>
            <i class="far fa-star" role="button" matTooltip="添加关注" (click)="toggleFolderStarred(folder)"
              *ngIf="!folder.isStarred"></i>
            <span class="ml-3">--</span>
          </div>
          <div class="col-md-2 col-auto d-md-flex d-none">
            <ng-container *ngIf="folder.users.length==1">
              <span>仅自己</span>
            </ng-container>
            <ng-container *ngIf="folder.users.length > 1">
              <span [matTooltip]="getTooltip(folder.users)">
                {{folder.users.length}} Members
              </span>
            </ng-container>
          </div>
          <div class="col-md-auto col-auto">
            <button mat-icon-button color="primary" matTooltip="更多" [matMenuTriggerFor]="folderMenu" aria-label="Menu">
              <mat-icon> more_horiz</mat-icon>
            </button>
            <mat-menu #folderMenu="matMenu">
              <button *hasClaim="'IsSharedFileFolder'" mat-menu-item (click)="onSharedFolder(folder,'folder')">
                <mat-icon> shared</mat-icon>
                共享
              </button>
              <button *hasClaim="'IsDownloadFile'" mat-menu-item (click)="downloadFolder(folder)">
                <mat-icon> download</mat-icon>
                下载
              </button>
              <button *hasClaim="'IsSendEmail'" mat-menu-item (click)="sendEmail(folder)">
                <mat-icon> forward_to_inbox</mat-icon>
                发送邮件
              </button>
              <button *hasClaim="'IsCopyFolder'" mat-menu-item (click)="onCopyFolder(folder)">
                <mat-icon> content_copy</mat-icon>
                拷贝
              </button>
              <button *hasClaim="'IsMoveFile'" mat-menu-item (click)="onMovedFolder(folder)">
                <mat-icon> zoom_out_map</mat-icon>
                移动
              </button>
              <button *hasClaim="'IsRenameFile'" mat-menu-item (click)="renameFolder(folder)">
                <mat-icon> edit</mat-icon>
                重命名
              </button>
              <button *hasClaim="'IsDeleteFileFolder'" mat-menu-item (click)="deleteFolder(folder)">
                <mat-icon> delete</mat-icon>
                删除
              </button>
              <button mat-menu-item (click)="toggleFolderStarred(folder)">
                <ng-container *ngIf="folder.isStarred">
                  <mat-icon class="material-icons"> grade</mat-icon>
                  移除关注
                </ng-container>
                <ng-container *ngIf="!folder.isStarred">
                  <mat-icon class="material-icons-outlined"> grade</mat-icon>
                  添加关注
                </ng-container>
              </button>
            </mat-menu>
          </div>
        </div>
        <div *hasClaim="'IsSharedFileFolder'" class="showme d-none d-md-block"
          (click)="onSharedFolder(folder,'folder')">
          <span class="material-icons-outlined text-main cursor-pointer">
            share
          </span>
        </div>
      </li>
    </ul>
  </ng-container>
</ng-container>

<mat-menu #folderMenuRight="matMenu">
  <ng-template matMenuContent let-folder="folder" let-type="type">
    <button *hasClaim="'IsSharedFileFolder'" mat-menu-item (click)="onSharedFolder(folder,type)">
      <mat-icon> shared</mat-icon>
      共享
    </button>
    <button *hasClaim="'IsDownloadFile'" mat-menu-item (click)="downloadFolder(folder)">
      <mat-icon> download</mat-icon>
      下载
    </button>
    <button *hasClaim="'IsSendEmail'" mat-menu-item (click)="sendEmail(folder)">
      <mat-icon> forward_to_inbox</mat-icon>
      发送邮件
    </button>
    <button *hasClaim="'IsCopyFolder'" mat-menu-item (click)="onCopyFolder(folder)">
      <mat-icon> content_copy</mat-icon>
      拷贝
    </button>
    <button *hasClaim="'IsMoveFile'" mat-menu-item (click)="onMovedFolder(folder)">
      <mat-icon> zoom_out_map</mat-icon>
      移动
    </button>
    <button *hasClaim="'IsRenameFile'" mat-menu-item (click)="renameFolder(folder)">
      <mat-icon> edit</mat-icon>
      重命名
    </button>
    <button *hasClaim="'IsDeleteFileFolder'" mat-menu-item (click)="deleteFolder(folder)">
      <mat-icon> delete</mat-icon>
      删除
    </button>
    <button mat-menu-item (click)="toggleFolderStarred(folder)">
      <ng-container *ngIf="folder.isStarred">
        <mat-icon class="material-icons"> grade</mat-icon>
        移除关注
      </ng-container>
      <ng-container *ngIf="!folder.isStarred">
        <mat-icon class="material-icons-outlined"> grade</mat-icon>
        添加关注
      </ng-container>
    </button>
  </ng-template>
</mat-menu>

<div class="loading-shade" *ngIf="isLoading">
  <mat-spinner></mat-spinner>
</div>
